<script setup lang="ts">
import {
  RenderingEngine,
  Enums,
  init as csInit,
  Types,
  volumeLoader,
  setVolumesForViewports,
} from '@cornerstonejs/core';
import { init as csTools3dInit } from '@cornerstonejs/tools';
import { cornerstoneNiftiImageVolumeLoader } from '@cornerstonejs/nifti-volume-loader';

// import { setCtTransferFunctionForVolumeActor } from '@/utils/demo/helpers';
import { ref } from 'vue'

const { ViewportType, RequestType } = Enums
const volumeName = 'CT_VOLUME_ID' // Id of the volume less loader prefix
const volumeLoaderScheme = 'cornerstoneStreamingImageVolume' // Loader id which defines which volume loader to use
const volumeId = `${volumeLoaderScheme}:${volumeName}` // VolumeId with loader id + volume id
const sagRef = ref(null)
const axRef = ref(null)
const corRef = ref(null)
const viewportId1 = 'Axial'
const viewportId2 = 'Sagittal'
const viewportId3 = 'Coronal'
const viewportIds = [viewportId1, viewportId2, viewportId3]
// Instantiate a rendering engine
let renderingEngine


async function setup() {
  await csInit();
  await csTools3dInit();

  volumeLoader.registerVolumeLoader('nifti', cornerstoneNiftiImageVolumeLoader);

  const niftiURL =
    'https://ohif-assets.s3.us-east-2.amazonaws.com/nifti/MRHead.nii.gz';
  const volumeId = 'nifti:' + niftiURL;

  const volume = await volumeLoader.createAndCacheVolume(volumeId);

  const renderingEngineId = 'myRenderingEngine';
  const renderingEngine = new RenderingEngine(renderingEngineId);

  const viewportInputArray: any = [
    {
      viewportId: viewportId1,
      type: ViewportType.ORTHOGRAPHIC,
      element: axRef.value![0],
      defaultOptions: {
        orientation: Enums.OrientationAxis.AXIAL,
        background: <Types.Point3>[0, 0, 0]
      }
    },
    {
      viewportId: viewportId2,
      type: ViewportType.ORTHOGRAPHIC,
      element: sagRef.value![0],
      defaultOptions: {
        orientation: Enums.OrientationAxis.SAGITTAL,
        background: <Types.Point3>[0, 0, 0]
      }
    },
    {
      viewportId: viewportId3,
      type: ViewportType.ORTHOGRAPHIC,
      element: corRef.value![0],
      defaultOptions: {
        orientation: Enums.OrientationAxis.CORONAL,
        background: <Types.Point3>[0, 0, 0]
      }
    }
  ]

  renderingEngine.setViewports(viewportInputArray);

  setVolumesForViewports(
    renderingEngine,
    [{ volumeId}],
    viewportInputArray.map((v) => v.viewportId)
  );

  renderingEngine.render();
}

setup();

const views = [
  {
    'ref': axRef,
    'class': 'lt',
    'viewportId': viewportId1
  },
  {
    'ref': sagRef,
    'class': 'lb',
    'viewportId': viewportId2
  },
  {
    'ref': corRef,
    'class': 'rt',
    'viewportId': viewportId3
  }
]

</script>

<template>
  <div class="w-full max-w-[900px] ml-auto mr-auto h-[500px] grid grid-cols-2 grid-rows-2 border-2 border-amber-200">
    <template v-for="view in views" :key="view.class">
      <div
        :ref="view.ref"
       >
      </div>
    </template>
  </div>
</template>

<style scoped>

</style>
